<template>
  <div>
    <van-field
      v-model="iccid"
      is-link
      readonly
      label="SIM卡"
      placeholder="选择已实名的SIM卡"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        title="选择已实名的SIM卡"
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="(value)=>{
          this.iccid = value
          this.showPicker = false
        }"
      />
    </van-popup>
    <van-cell-group inset style="margin-top: 20px">
      <van-cell title="卡余额" value="50元" >
        <template #default>
          <span class="moneny">{{balance}}元</span>
        </template>
      </van-cell>
    </van-cell-group>
    <!--使用中的包-->
    <div>
      <van-cell-group style="margin-top: 20px" v-if="masterPkg.pkgDetailName">
        <van-cell :title="masterPkg.pkgDetailName" value="使用中">
          <template #default>
            <Tag type="success">使用中</Tag>
          </template>
          <template #label>
            <div class="slot-cell">
              <div class="cell-label">
                <van-circle
                  v-model="currentRate"
                  :rate="parseInt((masterPkg.remainFlow/(parseFloat(masterPkg.useFlow) + parseFloat(masterPkg.remainFlow)))*100)"
                  :stroke-width="100"
                  layer-color="#ebedf0"
                  text="剩余流量"
                  :clockwise="false"
                >
                  <template #default>
                    <div class="slot-circle">
                      <div>剩余流量</div>
                      <div>{{masterPkg.remainFlow}}MB</div>
                    </div>
                  </template>
                </van-circle>
                <div>
                  有效期截止:{{masterPkg.expireTime.split(" ")[0]}}
                </div>
              </div>
              <div style="margin-left: 20px">
                <div>本日流量:{{masterPkg.todayFlow}}MB</div>
                <div>昨日流量:{{masterPkg.yesterdayFlow}}MB</div>
                <div>已用流量:{{masterPkg.useFlow}}MB</div>
                <div>剩余流量:{{masterPkg.remainFlow}}MB</div>
                <div>总计流量:{{masterPkg.totalFlow}}MB</div>
              </div>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
      <!--加油包-->
      <van-cell-group style="margin-top: 20px" v-if="listPkg.length">
        <van-cell v-for="item in listPkg" :title="item.pkgDetailName" :key="item.pkgDetailName" value="状态">
          <template #default>
            <Tag v-if="item.deducting===0" type="warning">未启用</Tag>
            <Tag v-if="item.deducting===2" color="#7232dd">已失效</Tag>
          </template>
          <template #label>
            <div class="slot-sub-cell">
              <div>剩余流量：{{item.remainFlow}}MB</div>
              <div>有效期至：{{item.expireTime}}</div>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <Empty v-if="JSON.stringify(masterPkg) == '{}' && listPkg.length === 0" description="暂无流量数据">
      <span style="color: #666666">已完成首充，仍需要实名认证后SIM卡才可使用</span>
    </Empty>

    <div style="margin:40px 0;padding: 0 20px" >
      <van-button type="warning" style="width: 100%" @click="()=>{
        $router.push('/order?iccid='+this.iccid)
      }">流量订购</van-button>
    </div>
  </div>
</template>

<script>
  import {getCardList, getRecharge, getSimFlow} from "../../api/user";
  import {Tag,Empty} from 'vant'
  import {urlSearch} from "../../utils";

  export default {
    name: "search",
    components:{Tag,Empty},
    data() {
      return {
        iccid: '',
        msisdn:'',
        totalData:[],
        showPicker: false,
        columns: [],
        masterPkg:{},  // 当前使用中的流量包
        listPkg:[],  // 队列中的流量包
        currentRate: 0,
        rate: 10,
        balance:0,
        firstBilled: false, // 是否已完成首充 true 已完成，false 未首充
      }
    },
    mounted() {
      this.getCardList()
    },
    watch:{
      iccid(val) {
        this.msisdn= this.totalData.filter(item=>item.iccid===val)[0].msisdn
        this.getSimFlow({
          msisdn:this.msisdn
        })
        this.getRecharge(this.msisdn)
      }
    },
    methods:{
      getCardList() {
        getCardList(this.clientId).then(res => {
          this.columns = res.data.filter(item=>item.realStatus===2).map(item=>item.iccid)
          this.totalData = res.data
          this.totalCardList = res.data
          this.iccid = urlSearch('iccid')||this.columns[0]
        })
      },
      async getSimFlow(data){
        const res = await getSimFlow(data)
        if(res.data.records.length>0){
          this.masterPkg = res.data.records.filter(item=>item.deducting===1)[0]||{}
          this.listPkg = res.data.records.filter(item=>item.deducting!==1) // 0未启用 1使用中 2失效
        }else {
          this.masterPkg = {}
          this.listPkg = []
        }
      },
      // 查询余额
      getRecharge(msisdn){
        // 查询余额
        getRecharge(msisdn).then(res=>{
          this.balance = res.data.balance||0
          // 判断是否首充
          if(!res.data.firstStatus){
            this.firstBilled = true
          }
        })
      },
    }
  }
</script>

<style scoped>
  .van-cell__value {
    flex: 0.2;
  }

  .slot-cell {
    display: flex;
    word-break: keep-all;
  }

  .slot-circle {
    width: 100%;
    height: 100%;
    color: #323233;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    word-break: keep-all;
  }
</style>
